<template>
  <view class="radio" @click="checked">
    <view
      class="check"
      :class="{
        active: isChecked,
      }"
    >
      <view v-show="isChecked" class="active"></view>
    </view>
    <view
      class="label"
      :class="{
        active: isChecked,
      }"
      >{{ label }}</view
    >
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      required: true,
    },
    label: String,
    obj: String,
    selectValue: {
      type: [String, Number, Boolean],
      required: true,
    },
  },
  data() {
    return {
      modelValue: this.value,
    };
  },
  computed: {
    isChecked() {
      return this.modelValue === this.selectValue;
    },
  },
  methods: {
    checked() {
      // this.$root.updateModelValue('category', this.value)
      this.$emit("updateModelValue", this.obj, this.value);
    },
  },
  created() {
    // this.$on("input", (value) => {
    //   this.modelValue = value;
    //   this.$emit("updateModelValue", 'category', value);
    // });
  },
};
</script>

<style lang="less" scoped>
 // 行为相关颜色
 @my-color-primary:#aa69ff;
 @my-color-error:#ff4747;
 
 // 文字相关颜色
 @my-text-color:#303330;
 @my-text-color-grey:rgb(157, 155, 155);
.radio {
  display: flex;
  align-items: center;
  margin-right: 0.5rem;
  color: @my-text-color-grey;
  .check {
    width: 1rem;
    height: 1rem;
    border: 1px solid @my-text-color-grey;
    border-radius: 50%;
    margin-right: 0.5rem;
    box-sizing: border-box;
    position: relative;
    &.active {
      border-color: @my-color-primary;
    }
    .active {
      width: 0.5rem;
      height: 0.5rem;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: @my-color-primary;
      border-radius: 50%;

      animation: active 0.5s 1;

      @keyframes active {
        from {
          width: 0rem;
          height: 0rem;
        }
        to {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
    }
  }
  .active {
    color: @my-color-primary;
  }
}
</style>